<template>
   <div class="person">
        <h1>情况一:监视ref定义的基本类型数据</h1>
        <h2>当前求和为:{{ sum }}</h2>
        <button @click="changeSum">点我sum+1</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { ref , watch} from 'vue'
    // 数据
    let sum = ref(1)
    // 方法
    function changeSum(){
        sum.value += 1
    }
    // 监视
    // 情况一:监视ref定义的基本类型数据
    const stopWatch = watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
        if(newValue>=10){
            stopWatch()
        }
    })
    console.log(stopWatch)
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>